import React, { useEffect, useState } from 'react';
import { Space, Table, Tooltip, Button, Switch, Popconfirm, message, Form, Input } from "antd";
import { FormOutlined, DeleteOutlined, SearchOutlined } from "@ant-design/icons";
import { useAppDispatch } from "@/hooks";
import {
    changeStateById,
    deleteHospitalSetByIdAsync,
    getHospitalSetAsync,
    getHospitalSetLockIdAsync,
    useSelectorHosp,
    deleteBatchMoveAsync,
    changeParams
} from "@/store/slice/hosp";
import { useSelectorCommon } from "@/store/slice/common";
import HospitalModal from "@/pages/hospital/hospitalSet/components/HospitalModal";

function HospitalSet() {
    const dispatch = useAppDispatch();
    const { hospSetList } = useSelectorHosp();
    const { pageInfo, loading } = useSelectorCommon();
    // 控制modal的显示与隐藏
    const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
    // 控制modal的标题
    const [modalTitle, setModalTitle] = useState<string>("添加医院设置");
    // 指定修改的内容
    const [hospitalSetInfo, setHospitalSetInfo] = useState<any>(null);
    // 选中的ID
    const [selectedId, setSelectedId] = useState<number>(-1);
    // 选中要删除的设置
    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
    // 批量删除
    const [delLoading, setDelLoading] = useState(false);
    const [form] = Form.useForm();
    useEffect(() => {
        dispatch(getHospitalSetAsync(1, 5));
        return function(){
            dispatch(changeParams({}));
        }
    }, []);
    return (
        <div>
            <Space style={{ marginBottom: 16 }}>
                <Button type={"primary"} onClick={() => {
                    setHospitalSetInfo(null);
                    setModalTitle("添加医院设置");
                    setIsModalVisible(true);
                }}>添加医院设置</Button>
                {/*<Button type="primary" onClick={start} disabled={!hasSelected} loading={loading}>*/}
                {/*    Reload*/}
                {/*</Button>*/}
                {/*<span style={{marginLeft: 8}}>*/}
                {/*  {hasSelected ? `Selected ${selectedRowKeys.length} items` : ''}*/}
                {/*</span>*/}
                <Button type='primary' onClick={async () => {
                    setDelLoading(true);
                    await dispatch(deleteBatchMoveAsync(selectedRowKeys));
                    setSelectedRowKeys([]);
                    setDelLoading(false);
                    message.success("批量删除 成功");
                }} disabled={selectedRowKeys.length === 0} loading={delLoading}>
                    批量删除{selectedRowKeys.length}条
                </Button>
                <Form
                    form={form}
                    name="basic"
                    initialValues={{ remember: true }}
                    onFinish={(values: any) => {
                        dispatch(changeParams(values));
                        dispatch(getHospitalSetAsync(1, 5));
                    }}
                    autoComplete="off"
                    layout={"inline"}
                >
                    <Form.Item
                        name="hosname"
                    >
                        <Input placeholder={"请输入医院名称"} />
                    </Form.Item>
                    <Form.Item
                        name="hoscode"
                    >
                        <Input placeholder={"请输入医院编码"} />
                    </Form.Item>

                    <Form.Item>
                        <Button icon={<SearchOutlined />} type="primary" htmlType="submit">
                            搜索
                        </Button>
                    </Form.Item>
                    <Form.Item>
                        <Button onClick={() => {
                            form.resetFields();// 重置表单
                            dispatch(changeParams({}));
                            dispatch(getHospitalSetAsync(1, 5));
                        }} htmlType="button">
                            重置
                        </Button>
                    </Form.Item>
                </Form>
            </Space>
            <Table
                rowSelection={{
                    selectedRowKeys,
                    onChange(newSelectedRowKeys: React.Key[]) {
                        console.log(newSelectedRowKeys);
                        setSelectedRowKeys(newSelectedRowKeys)

                    }
                }}
                loading={loading}
                pagination={{
                    ...pageInfo,
                    onChange(page, pageSize) {
                        // console.log(page,pageSize);
                        dispatch(getHospitalSetAsync(page, pageSize));
                    }
                }}
                // rowSelection={rowSelection}
                rowKey={"id"}
                /*增加表格边框*/
                bordered={true}
                scroll={{ x: 1800 }}
                columns={[
                    {
                        title: "序号",
                        width: 70,
                        align: "center",// 居中
                        // dataIndex:"id",
                        // 第一个参数：如果没有设置dataIdex,那么值为该行信息
                        render(value, rows, index) {
                            // console.log(value,rows,index);
                            return (pageInfo.current - 1) * pageInfo.pageSize + index + 1;
                        }
                    }, {
                        title: "医院名称",
                        align: "center",
                        width: 200,
                        ellipsis: true,// 超过宽度将自动省略
                        dataIndex: "hosname"
                    }, {
                        title: "医院编号",
                        align: "center",
                        dataIndex: "hoscode"
                    }, {
                        title: "是否锁定",
                        align: "center",
                        // 0：锁定 1：未锁定
                        dataIndex: "status",
                        render(status, rows) {
                            return (
                                <Switch checked={status === 0} onChange={() => {
                                    // dispatch(changeStateById(rows.id))
                                    dispatch(getHospitalSetLockIdAsync(rows.id, status));
                                }} />
                            )
                        }
                    }, {
                        title: "api基础地址",
                        align: "center",
                        dataIndex: "apiUrl"
                    }, {
                        title: "密钥",
                        align: "center",
                        width: 150,
                        ellipsis: true,// 超过宽度将自动省略
                        dataIndex: "signKey"
                    }, {
                        title: "联系人姓名",
                        align: "center",
                        dataIndex: "contactsName"
                    }, {
                        title: "联系人手机",
                        align: "center",
                        dataIndex: "contactsPhone"
                    }, {
                        title: "添加时间",
                        align: "center",
                        dataIndex: "createTime"
                    }, {
                        title: "更新时间",
                        align: "center",
                        dataIndex: "updateTime"
                    }, {
                        title: "操作",
                        align: "center",
                        // dataIndex:"hosname",
                        fixed: "right",// 右浮动
                        render(rows) {
                            return (
                                <Space>
                                    <Tooltip title="编辑">
                                        <Button onClick={() => {
                                            setModalTitle("修改医院设置");
                                            setHospitalSetInfo({ ...rows });
                                            setIsModalVisible(true);
                                        }} type="primary" shape="circle" icon={<FormOutlined />} />
                                    </Tooltip>

                                    <Popconfirm
                                        visible={rows.id === selectedId}
                                        placement="topRight"
                                        title={"确定要删除" + rows.hosname + "信息吗？"}
                                        onConfirm={async () => {
                                            try {
                                                await dispatch(deleteHospitalSetByIdAsync(rows.id));
                                                setSelectedId(-1);
                                                message.success("删除" + rows.hosname + "成功");
                                            } catch (data) {
                                                setSelectedId(-1);
                                            }

                                        }}
                                        onCancel={() => {
                                            setSelectedId(-1);
                                        }}
                                        okText="是"
                                        cancelText="否"
                                    >
                                        <Tooltip title="删除">
                                            <Button onClick={() => {
                                                setSelectedId(rows.id);
                                            }} danger type="primary" shape="circle" icon={<DeleteOutlined />} />
                                        </Tooltip>
                                    </Popconfirm>
                                </Space>
                            )
                        }
                    }
                ]}
                dataSource={hospSetList} />


            <HospitalModal hospitalSetInfo={hospitalSetInfo} modalTitle={modalTitle} setIsModalVisible={setIsModalVisible} isModalVisible={isModalVisible} />
        </div>
    );
}

export default HospitalSet;